<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
	<title>前端异常与错误追踪</title>
	<link rel="stylesheet" href="http://cdn.famanoder.com/stylesheets/page/fonticon.css">
	<script src="http://cdn.famanoder.com/javascripts/lib/jquery0.js"></script>
	<script src="http://localhost:2333/http.js"></script>
	<script src="http://localhost:2333/ErrorInspector.js"></script>	
	<!-- ErrorInspector.Config must before at where is you write and after at where your dependencies libaries , like between Jquery.js and your app.js -->

	<script src="http://localhost:2333/socket.io.js"></script>
	<style>
	*{padding: 0;margin:0;box-sizing: border-box;font-family: '微软雅黑';}
	html{font-size: 62.5%;}
	html,body{width: 100%;height:100%;}
	/* body{background: url(http://localhost:2333/images/bg.jpg) no-repeat;background-size: 100% 100%;background-position: 0 0;} */
	.fl{float: left;}
	nav{height:50px;width:100%;background: rgba(0,0,0,0.8);position: fixed;top:0;left:0;}
	.zan-music{height:30px;margin-top:9px;margin-left:20px;margin-right:15px;border: 1px solid #111B1B;border-radius: 3px;background: rgba(58,66,64,0.7);box-shadow: 0 1px 0 rgba(98,107,103,0.65) inset;padding: 5px 10px;}
	.zan {font-size: 13px;color: #B3C2C0;cursor: pointer;}
	.zan .icon {font-size: 18px;margin-right: 5px;margin-top: 1px;float: left;}
	.zan:hover,.hf:hover,.sets,.hftxt:hover{color:#30D3C2;cursor: pointer;}
	.zan .icon,.hf,.sets,.inpt,.ctrl,.delall{-webkit-transition: all 0.35s ease-out;
		-o-transition: all 0.35s ease-out;
		transition: all 0.35s ease-out;}
	.zan:hover .icon{-webkit-transform: rotate(-20deg);
	-ms-transform: rotate(-20deg);
	-o-transform: rotate(-20deg);
	transform: rotate(-20deg);}
	.fl{float: left;}
	.fr{float: right;}
	.hf,.sets{font-size: 1.4rem;line-height: 50px;color: #B3C2C0;text-decoration: none;    padding: 0 15px;}
	.sets{position: relative;}
	.setings{position: absolute;width: 200px;background-color: #EEFAFF;color: #777;border: 1px solid #B3F7F0;padding: 8px 10px 10px;font-size: 12px;top: 50px;left: -66px;border-top: 2px solid #30D3C2;-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	-ms-transform-origin: 50% 0;
	-o-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-transform: scale(1,0);
	-ms-transform: scale(1,0);
	-o-transform: scale(1,0);
	transform: scale(1,0);
	-webkit-transition: all .4s ease-out;
	-o-transition: all .4s ease-out;
	transition: all .4s ease-out;}
	.sets:hover .setings{
		-webkit-transform: scale(1,1);
		-ms-transform: scale(1,1);
		-o-transform: scale(1,1);
		transform: scale(1,1);
	}
	.inptvd{vertical-align: sub;}
	label{vertical-align: middle;margin-right: 5px;cursor: pointer;}
	.set{line-height: 24px;}
	.tra{position: absolute;width:0;height: 0;border-style:solid;}
	.tra1{top:-17px;left:85px;border-width: 8px 10px;border-color: transparent transparent #30D3C2 transparent;}
	.tra2{top:-12px;left:87px;border-width: 6px 8px;border-color: transparent transparent #EEFAFF transparent;}
	.inpt{width: 105px;padding: 2px;height: 1em;line-height: 1em;box-sizing: content-box;color: #666;border: 1px solid #ccc;box-shadow: 1px 1px 3px #F1EEEE inset;outline: 0;}
	.inpt:focus{box-shadow: 0 0 5px #7DF3E6;border: 1px solid #30D3C2;}
	.tip{line-height: 20px;color: #aaa;}
	.char{padding: 0 2px;border: 1px solid #30D3C2;margin: 0 2px;background-color: #CDF9F9;}
	.err{height:24px;line-height: 24px;font-size: 12px;color: #666;padding: 0 10px;border-bottom: 1px solid #eee;position: relative;overflow: hidden;}
	.class_collect {
		border:1px #21b57 solid;
		border-radius:5px;
		-webkit-border-radius:5px;
		 -moz-transition: all 0.5s ease-in;
        -webkit-transition: all 0.5s ease-in;
        -o-transition: all 0.5s ease-in;
        transition: all 0.5s ease-in;
        position: relative;
        display: block;
        width:210px; 
        height: 50px;
        line-height:50px;
        margin: 0 auto;
        color: #21b57e;
        background: #fff;
        font-size: 16px;
	}
	.class_collect > span:after{
		content: "";
        display: block;
        width:210px; 
        height: 50px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -o-border-radius:5px;
        -webkit-border-radius: 5px;
        position: absolute;
        left: 0;
        top: 0;
	}
	.class_collect:hover > span:after{
        animation:a_post_item_1 0.5s ease both;
        -moz-animation:a_post_item_1 0.5s ease both;
        -webkit-animation:a_post_item_1 0.5s ease both;
    }
    .collection-top .point:hover > span:after{
        animation:a_post_item_1 0.5s ease both;
        -moz-animation:a_post_item_1 0.5s ease both;
        -webkit-animation:a_post_item_1 0.5s ease both;
    }
    @-moz-keyframes a_post_item_1{
        0%{
            box-shadow:0px 0px 0px 0px rgba(255,255,255,1);
            -webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,1);
        }
        100%{
            box-shadow:0px 0px 0px 12px rgba(84,203,207,0);
            -webkit-box-shadow:0px 0px 0px 12px rgba(84,203,207,0);
        }
    }
    @-webkit-keyframes a_post_item_1{
        0%{
            box-shadow:0px 0px 0px 0px rgba(255,255,255,1);
            -webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,1);
        }
        100%{
            box-shadow:0px 0px 0px 12px rgba(84,203,207,0);
            -webkit-box-shadow:0px 0px 0px 12px rgba(84,203,207,0);
        }
    }
    .icon-check-empty,.icon-check-sign{font-size: 15px;cursor: pointer;margin: 5px 10px 0 0;}
    .icon-check-sign{font-size: 14px;color: #33f3de;}
    .err:hover .icon-check-empty,.ckall:hover .fl{color: #33f3de;}
    .err:hover{background: rgba(48, 211, 194, 0.13)!important;}
    .icon-signal{margin: 6px 2px 0 0;}
    .hot{margin-right: 10px;}
    .icon-signal,.hot{color: #f9215b;}
    .time,.browser{margin-right: 10px;}
    .browser{padding: 0px 2px;height: 17px;line-height: 17px;border-radius: 3px;margin-top: 3px;}
    .nice-browser{background:#29f53a ;color:#1dad7f;}
    .bs-browser{background:#ddd;color:#bbb;text-decoration: line-through;}
    .red{color: #f35151;font-weight: 700;}
    .msg{width: 456px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
    .errs{border-right: 1px solid #ccc;width: 770px;position: fixed;top: 50px;left: 0;bottom: 30px;border-bottom: 1px solid #ddd;overflow: auto;}
    .ctrl{position: absolute;top:3px;border-radius: 10px;background: rgb(225, 230, 230);padding: 3px;width: 17px;height: 17px;text-align: center;cursor: pointer;opacity: 0;right:-17px;}
    .ctrl:hover{color:#fff;}
    .detail:hover{background: #3891FF;}
    .solved:hover{background: #29f53a;}
    .del:hover{background: red;}
    .err:hover .ctrl{opacity: 1;}
    .err:hover .detail{right:62px;}
    .err:hover .solved{right:35px;}
    .err:hover .del{right:8px;}
    .fxctrl{position: fixed;bottom:0;left:0;height: 30px;width: 770px;;border-right: 1px solid #ccc;background: #fff;z-index: 111;color: #666;padding-left: 10px;}
    .delall{background-color: #dedede;padding: 2px 5px;border-radius: 3px;margin: 5px 10px;cursor: pointer;}
    .delall .icon{font-size: 14px;color: crimson;}
    .delall:hover{background-color: #F7B1B1;color: #E8284F;}
    .checkall{margin-top: 8px;}
    .txtall{margin-left: -5px;margin-right: 5px;margin-top: 7px;cursor: pointer;}
	</style>
</head>
<body contenteditable>
	<nav>
		<a href="http://famanoder.com">
			<img src="http://cdn.famanoder.com/images/logo.png" alt="famanoder-logo" width=160 height=50 class="fl">
		</a>
		<div class="zan-music fr">
			<div title="3881人已赞" class="zan fl">
				<div class="icon icon-thumbs-up-alt"></div>
				<span>赞（<span style="font-family:'Georgia';">3881</span>）</span>
			</div>
		</div>
		<a href="http://famanoder.com/suggests" class="fr hf">反馈</a>
		<div class="sets fr">
			<div class="hftxt">设置</div>
			<div class="setings">
				<div class="tra tra1"></div>
				<div class="tra tra2"></div>
				<!-- <p class="tip">***多个关联人使用<span class="char">& , |</span>隔开</p>
				<div class="set">关联他人：
					<input type="text" class="inpt">
				</div> -->
				<div class="set">实时显示：
					<input type="radio" class="inptvd" name="news" id="new1" checked="checked">
					<label for="new1">是</label>
					<input type="radio" class="inptvd" name="news" id="new2">
					<label for="new2">否</label>
				</div>
				<div class="set">邮件提醒：
					<input type="radio" class="inptvd" name="mail" id="mail1">
					<label for="mail1">是</label>
					<input type="radio" class="inptvd" name="mail" id="mail2" checked="checked">
					<label for="mail2">否</label>
				</div>
				<div class="set">展现方式：
					<input type="radio" class="inptvd" name="showtp" id="showtp1">
					<label for="showtp1">列表</label>
					<input type="radio" class="inptvd" name="showtp" id="showtp2" checked="checked">
					<label for="showtp2">H5</label>
				</div>
			</div>
		</div>
	</nav>
	
	<script type="text" id="err-templ">
		<div class="err" style="background:{isNew};">
			<i class="fl icon icon-check-empty check"></i>
			<i class="fl icon icon-signal" style="opacity:{opacity}"></i>
			<div style="opacity:{opacity}" class="fl hot">{hot}</div>
			<div class="fl time">{time}</div>
			<div class="fl" style="width:90px;"><div class="fl browser {browserType}">{browser}</div></div>
			<div class="fl msg">{msg}</div>
			<div class="icon icon-ellipsis-horizontal ctrl detail"></div>
			<div class="icon icon-ok ctrl solved"></div>	
			<div class="icon icon-remove ctrl del"></div>
		</div>
	</script>

	<!-- <div class="bg" style="position: absolute;top:100px;left:100px;bottom:100px;right:100px;background:#ccc;"></div> -->
	<div class="class_collect"><span></span>
saassasassa
	</div>
	<div class="errs">
		
	</div>
	<div class="fxctrl">
		<div class="fl ckall">
			<i class="fl icon icon-check-empty check checkall"></i>
			<span class="fl txtall">全选</span>
		</div>
		<div class="delall fl">
			<div class="icon icon-remove-sign"></div>
			<span>删除</span>
		</div>
	</div>
	<script>

function pastes(e) {
  // if (state !== Plugin.State.EDITABLE) return
  
  var text, textType = 'text/plain'
  var clipboard = e.getBrowserEvent().clipboardData
  console.log(clipboard)
  if (clipboard) { // w3c(webkit,opera...)
    if (clipboard.types && goog.array.contains(clipboard.types, textType)) {
      e.preventDefault()
      text = clipboard.getData(textType)
      this.replaceText(range, text)
    }
  } else if (window.clipboardData) { // IE
    text = window.clipboardData.getData('Text')
    if (text) {
      e.preventDefault()
      this.replaceTextIE(range, text)
    }
  } else { // FF
    // TODO：rewrite
    var offset = range.getStartOffset()
    var selectedLength = range.getText().length
    var codeLength = function() {
      return code.firstChild ? goog.editor.node.getLength(code.firstChild) : 0
    }
    var endLength = codeLength() - offset - selectedLength
    setTimeout(function() {
      // Plugin.cleanup(code)
      var caretOffset = codeLength() - endLength
      if (code.firstChild) {
        goog.dom.Range.createCaret(code.firstChild, Math.max(offset, caretOffset)).select()
      }
    })
  }}
document.addEventListener('paste', function (event) {
  console.log(event.clipboardData.getData("text"))//谷歌数据来自event,其他可能来自window
  var isChrome = false;
  if ( event.clipboardData || event.originalEvent ) {
    //not for ie11  某些chrome版本使用的是event.originalEvent
    var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
    if ( clipboardData.items ) {
      // for chrome
      var  items = clipboardData.items,
        len = items.length,
        blob = null;
      isChrome = true;
      //items.length比较有意思，初步判断是根据mime类型来的，即有几种mime类型，长度就是几（待验证）
      //如果粘贴纯文本，那么len=1，如果粘贴网页图片，len=2, items[0].type = 'text/plain', items[1].type = 'image/*'
      //如果使用截图工具粘贴图片，len=1, items[0].type = 'image/png'
      //如果粘贴纯文本+HTML，len=2, items[0].type = 'text/plain', items[1].type = 'text/html'
      // console.log('len:' + len);
      // console.log(items[0]);
      // console.log(items[1]);
      // console.log( 'items[0] kind:', items[0].kind );
      // console.log( 'items[0] MIME type:', items[0].type );
      // console.log( 'items[1] kind:', items[1].kind );
      // console.log( 'items[1] MIME type:', items[1].type );
 
      //阻止默认行为即不让剪贴板内容在div中显示出来
      event.preventDefault();
 
      //在items里找粘贴的image,据上面分析,需要循环  
      for (var i = 0; i < len; i++) {
        if (items[i].type.indexOf("image") !== -1) {
          // console.log(items[i]);
          // console.log( typeof (items[i]));
 
          //getAsFile() 此方法只是living standard firefox ie11 并不支持        
          blob = items[i].getAsFile();
        }
      }
      if ( blob !== null ) {
        var reader = new FileReader();
        reader.onload = function (event) {
          // event.target.result 即为图片的Base64编码字符串
          var base64_str = event.target.result
          console.log(reader)
          console.log(event)
          $('body').append('<img src="'+base64_str+'" alt="" />')

          // var img=new Image();
          // img.onload=function(){
          // 	if(this.complete){
          // 		console.log(this.size)
          // 	}
          // }
          // img.src=base64_str;
          //可以在这里写上传逻辑 直接将base64编码的字符串上传（可以尝试传入blob对象，看看后台程序能否解析）
          uploadImgFromPaste(base64_str, 'paste', isChrome);
        }
        reader.readAsDataURL(blob); 
      }
    } else {
      //for firefox
      setTimeout(function () {
        //设置setTimeout的原因是为了保证图片先插入到div里，然后去获取值
        var imgList = document.querySelectorAll('#tar_box img'),
          len = imgList.length,
          src_str = '',
          i;
        for ( i = 0; i < len; i ++ ) {
          if ( imgList[i].className !== 'my_img' ) {
            //如果是截图那么src_str就是base64 如果是复制的其他网页图片那么src_str就是此图片在别人服务器的地址
            src_str = imgList[i].src;
          }
        }
        uploadImgFromPaste(src_str, 'paste', isChrome);
      }, 1);
    }
  } else {
    //for ie11
    setTimeout(function () {
      var imgList = document.querySelectorAll('#tar_box img'),
        len = imgList.length,
        src_str = '',
        i;
      for ( i = 0; i < len; i ++ ) {
        if ( imgList[i].className !== 'my_img' ) {
          src_str = imgList[i].src;
        }
      }
      uploadImgFromPaste(src_str, 'paste', isChrome);
    }, 1);
  }
})
 
function uploadImgFromPaste (file, type, isChrome) {
  var formData = new FormData();
  formData.append('image', file);
  formData.append('submission-type', type);
 
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload_image_by_paste');
  xhr.onload = function () {
    if ( xhr.readyState === 4 ) {
      if ( xhr.status === 200 ) {
        var data = JSON.parse( xhr.responseText ),
          tarBox = document.getElementById('tar_box');
        if ( isChrome ) {
          var img = document.createElement('img');
          img.className = 'my_img';
          img.src = data.store_path;
          tarBox.appendChild(img);
        } else {
          var imgList = document.querySelectorAll('#tar_box img'),
            len = imgList.length,
            i;
          for ( i = 0; i < len; i ++) {
            if ( imgList[i].className !== 'my_img' ) {
              imgList[i].className = 'my_img';
              imgList[i].src = data.store_path;
            }
          }
        }
 
      } else {
        console.log( xhr.statusText );
      }
    };
  };
  xhr.onerror = function (e) {
    console.log( xhr.statusText );
  }
  xhr.send(formData);
}





		ErrorInspector.Config={
			url:'http://localhost:2333/ErrorInspector/xiaofeng',
			qs:{
				ext:'hufeng'
			},
			// IgnoreFromJSPattern:/2333/i,
			IgnoreMsgPattern:/\{.+\}/i,
			IgnoreBrowserError:0
		}
		// ErrorInspector.report({
		// 	a:1,b:2
		// });
		var socket = io.connect("http://localhost:2333");
		var user=location.pathname.replace(/.*\/(\w+)$/i,'$1');
		var item=$('#err-templ').html();
		function smTempl(mp,conf){
			for(var c in conf){
				var reg=new RegExp('{'+c+'}','g');
				mp=mp.replace(reg,conf[c]);
			}
			return mp;
		}
		function fmtOp(x){
			var n=x.replace(/([^%]+)%$/,'$1');
			return Math.ceil(n/20)*0.2;
		}
		function render(data){
			return $.map(data,function(err,i){
				var bro=Math.random()>0.5?err.browser:(Math.random()>0.5?'IE/11':'IE/9.0');
				var good=/chrome|firefox|opera|safari|(?:ie\/\d{2})/i.test(bro);
				var reg=/([\w\s]+:)(.*)/;
				var msg=err.msg.match(reg)?err.msg.replace(reg,'<i class="red">$1</i><u>$2</u>'):err.msg;
				return smTempl(item,{
					isNew:err.new?'#ffc5c5':i%2==0?'rgba(214, 215, 216, 0.09)':'transparent',
					opacity:fmtOp(Math.random()>0.5?'5%':'50%'),
					hot:'5%',
					time:err.time,
					browser:bro,
					browserType:(good?'nice':'bs')+'-browser',
					msg:msg
				})
			});
		}
		socket.on('connect', function () {
			socket.emit('sendUserName',user);
			socket.on('show',function(data) {
				console.log(data)
				if (data.data.length) {
					$('.errs').append(render(data.data).join(''));
				};
			});
			socket.on('new_error',function(data){
				document.title='程序出错啦！！！';
				var err=render(data.data).join('');
				$('.err').length?$('.err:first').before(err):$('.errs').append(err);
			});
		});
		$('body')
		.on('click','.check',function(){
			if ($(this).hasClass('checked')) {
				$(this).removeClass('checked').removeClass('icon-check-sign').addClass('icon-check-empty');
				if ($(this).hasClass('checkall')) {
					$('.check').not('.checkall').removeClass('checked').removeClass('icon-check-sign').addClass('icon-check-empty');
				};
			}else{
				$(this).removeClass('icon-check-empty').addClass('checked').addClass('icon-check-sign');
				if ($(this).hasClass('checkall')) {
					$('.check').not('.checkall').addClass('checked').removeClass('icon-check-empty').addClass('icon-check-sign');
				};
			};

		})
		.on('click','.txtall',function(){
			$('.checkall').trigger('click');
		});
	// document.onmousemove=function(e){
	// 	document.querySelector('.bg').style.transform='translate('+(e.clientX-document.body.clientWidth/2)/(document.body.clientWidth/2)*30+'px,'+(e.clientY-document.body.clientHeight/2)/(document.body.clientHeight/2)*30+'px)';
	// }

	document.body.onclick=function(e){
		// ErrorInspector.log({
		// 	type:e.type,
		// 	tag:e.target.tagName,
		// 	clas:e.target.className
		// });
		// ErrorInspector.tryit(function(rep){
		// 	as
		// });
	}
	// window.onerror=function(a,b,c){
	// }
	// 	console.log(a)
	// 	new Image().src='http://cfdf/sa';
	// 	return true;
	// }
	// acx
	// var tryEvts=function(){
	// 	console.log(this)
	// }
	// $.ajaxSetup({
	// 				timeout:60000,
	// 				error: function(jqXHR){
	// 					setTimeout(function () {
	// 						alert('（'+jqXHR.status+'）'+jqXHR.statusText+'');
	// 					}, 1);					
	// 				}
	// 			});
	// $(function(){
	// 	$.post('/',{a:1}).then(function(){});
	// });
	</script>
</body>
</html>